<template>
  <FormItemWrapper :component="component">
    <template v-if="isDesigner">
      <PnColorPicker value=""
                   :disabled="component.compConfigData.widgetConfig.disabled"
                   :editable="component.compConfigData.widgetConfig.editable"
                   :alpha="component.compConfigData.widgetConfig.alpha"
                   :hue="component.compConfigData.widgetConfig.hue"
                   :recommend="component.compConfigData.widgetConfig.recommend"
                   :size="component.compConfigData.widgetConfig.size"
                   @on-change="onChangeHandler"
      />
    </template>
    <template v-else>
      <PnColorPicker v-model="formData[component.compConfigData.fieldConfig.bindingFieldName]"
                   :disabled="component.compConfigData.widgetConfig.disabled"
                   :editable="component.compConfigData.widgetConfig.editable"
                   :alpha="component.compConfigData.widgetConfig.alpha"
                   :hue="component.compConfigData.widgetConfig.hue"
                   :recommend="component.compConfigData.widgetConfig.recommend"
                   :size="component.compConfigData.widgetConfig.size"
                   @on-change="onChangeHandler"
      />
    </template>
  </FormItemWrapper>
</template>

<script>
import FormLayoutCommonUtil from "@/utils/FormLayoutCommonUtil";
import FormWidgetMixin from "@/mixin/FormWidgetMixin";

export default {
  name: "FormItemColorPickerWidget",
  mixins: [FormWidgetMixin],
  attr: {
    version: '1.0',
    configDataTemp: Object.assign({

      fieldConfig: FormLayoutCommonUtil.buildWidgetFieldConfig(),
      formItemConfig: FormLayoutCommonUtil.buildFormItemConfig({}, '颜色选择'),
      widgetConfig: {
        disabled: false,
        editable: true,
        alpha: false,
        hue: true,
        recommend: true,
        colors: [],
        format: '',
        size: 'default',

      },
      widgetEventCodeConfig: FormLayoutCommonUtil.buildWidgetEventCodeConfig({
        onChange: {remark: '数据改变时触发', resultValues: ['value'], code: ''},
      })

    })
  },
  data() {
    return {

    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.runWidgetOnMountedEventCode()
    },

    onChangeHandler(value) {
      this.runWidgetEventCode('onChange', (fn)=>{
        fn.call(this, value)
      })
    },
  },
  computed: {},
  watch: {}
}
</script>

<style scoped>

</style>
